<template>
	<div>
		<div style="display: flex; margin-bottom: 10px">
			<div v-for="item in colorDatar1" style="display: flex; align-items: center; margin-right: 10px">
				<span :style="{ background: item.itemStyle.color, width: '14px', height: '14px', display: 'block' }"></span>
				<span style="margin-left: 10px">{{ item.name }}</span>
			</div>
		</div>
	</div>
	<div id="container" style="width: 100%; height: 100%"></div>
</template>
<script setup lang="ts">

import { dicApi } from '/@/api/system/dic/index';
import { ref, unref, onMounted, onUnmounted,watch, nextTick } from 'vue';
import { useRoute } from 'vue-router';
let map = null;
const diApi = dicApi();
let AMapSelf = ref();
const infoWindow = ref();
const sertIndex = ref();
const markerData = ref([]);
const route = useRoute();
const colorDatar1 = ref([
	{
		value: 2,
		name: '全部在线',
		itemStyle: {
			color: '#0abf39',
		},
	},
	{
		value: 1,
		name: '部分在线',
		itemStyle: {
			color: '#ff7300',
		},
	},
	{
		value: 0,
		name: '都不在线',
		itemStyle: {
			color: '#e11236',
		},
	},
	{
		value: -1,
		name: '没有该设备',
		itemStyle: {
			color: '#d9d1d2',
		},
	},
]);

const setInfoWindows = (e: Element, item: any, AMapSelf1: any) => {
	let itemData = [
		{
			key: 'mec',
			name: 'MEC',
		},
		{
			key: 'rsu',
			name: 'RSU',
		},
		{
			key: 'camera_1',
			name: '近景相机',
		},
		{
			key: 'camera_2',
			name: '远景相机',
		},
		{
			key: 'camera_3',
			name: '鱼眼相机',
		},
		// {
		// 	key:"lamp",
		// 	name:"信号灯"
		// },
		{
			key: 'lampCollector',
			name: '信号灯采集器',
		},
		{
			key: 'radar_1',
			name: '毫米波雷达',
		},
		{
			key: 'radar_2',
			name: '激光雷达',
		},
		// ,
		// {
		// 	key:"rtk",
		// 	name:"RTK"
		// }
	];

	let listItem = '';

	const colorList: any = {
		'2': '#0abf39',
		'1': '#ff7300',
		'0': '#e11236',
		'-1': '#d9d1d2',
	};
	const itemkey: any = {
		'2': '全部在线',
		'1': '部分在线',
		'0': '都不在线',
		'-1': '没有该设备',
	};
	let bser = '';
	console.log(Object.keys(colorList));
	Object.keys(colorList).map((item) => {
		// if(item!=-1)
		// let colors1=`background:${colorList[item]};display:block;width:14px;height:14px;margin-right:10px;margin-left:10px`
		// bser+=`<div style="display:flex;"><span style="${colors1}">
		// </span><span style="font-size:12px">${itemkey[item]}</span></div>`
	});

	// 信息窗体的内容'\'padding:10px' 0px = '' 4px; \'=''
	let content = [`<div style="padding:10px 0px;font-size:12px"><div style="display:flex;">${item.name}${bser}</div>`];

	itemData.map((citem) => {
		if (item.device_status[citem.key] != undefined) {
			let Nert = colorList[item.device_status[citem.key]] ? colorList[item.device_status[citem.key]] : '#dddee3';
			let colors1 = `background:${Nert};display:block;width:14px;height:14px;margin-right:10px;`;
			let colors = `<span style='${colors1}'></span>`;
			listItem = `<div style="display:flex;font-size:12px;">${colors}${citem.name}</div>`;

			content.push(listItem);
		}
	});

	console.log(content);
	// 创建 infoWindow 实例
	infoWindow.value = new (window as any).AMap.InfoWindow({
		content: content.join('<br>'), //传入 dom 对象，或者 html 字符串
	});
	// 打开信息窗体
	let dd = AMapSelf1.getCenter();
	// dd.pos = [e.pos[0], e.pos[1]]
	dd.lat = item.lat;
	dd.lng = item.lng;

	infoWindow.value.open(AMapSelf1, dd);
};
onUnmounted(() => {
	console.log('清除了定时器');
	clearInterval(sertIndex.value);
});
// 创建一个定时器
const sert = (AMapSelf1: any) => {
	
	sertIndex.value = setInterval(() => {
		// AMapSelf.value.clearMap()
		
		let parar = {
			page: 1,
			include: ' region;road;intersection;location',
			search: 'location_id:;intersection_id:;name::like;region_id:;road_id:;pole_type:',
		};
		diApi.getDicList(parar).then((res) => {
			let data = [];
			// 先清空mar
			AMapSelf1.remove(markerData.value);
			markerData.value = res.returnData;

			if (res.isSuccess) {
				data = res.returnData;
			}
			let markData = <any>[];
			const markerContent = `<div class="custom-content-marker" >
						<img src="/admin/marker.png" style="width: 30px;height: 30px;">
						
						</div>`;
			data.map((item: any, index: number) => {
				const marker = new AMap.Marker({
					position: new AMap.LngLat(item.lng, item.lat), //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
					title: item.name,
					offset: new AMap.Pixel(0, 0),
					content: markerContent, //将 html 传给 content
					//   icon: '/marker.png',
					anchor: 'bottom-center',
				});
				marker.setLabel({
					direction: 'right',
					offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
					content: "<div class='info' style='font-size:12px' onClick='set(item)'>" + item.name + '</div>', //设置文本标注内容
				});
				marker.on('mouseover', function (e: any) {
					// 显示这个marker点详细信息的浮窗，这个要放单独方法调用才能显示，暂时不明白为什么，直接把方法内的东西写在下面浮窗并不显示
				});
				// 鼠标移出marker点位触发
				marker.on('mouseout', function (e: any) {});
				// 鼠标点击marker触发
				marker.on('click', function (e: any, marker: any) {
					infoWindow.value?.close();
					setInfoWindows(e, item, AMapSelf1);

					//
					// clearMarker()
				});

				markData.push(marker);
			});
			AMapSelf1.add(markData);
		});
	}, 1000*60);
};
const initMap=async ()=> {
		// const wrapEl = unref(wrapRef);

		AMapSelf.value = new AMap.Map('container', {
			resizeEnable: true,
			zoom: 16.5, // 初始化缩放级别
			viewMode: '3D',
			collision: true,
			allowCollision: true,
			center: [119.696603, 25.478395], // 初始化中心点
			// 指定离线地图路径
			layers: [
				new AMap.TileLayer({
					visible: true,
					zIndex: 99,
					opacity: 1,
					getTileUrl: (a: any, b: any, c: any) => {
						//经纬度转换成本地瓦片所在路径

						let flag = '00000000';
						let zz = c;
						let z = 'L' + zz;
						let xx = a.toString(16);
						let x = 'C' + flag.substring(0, 8 - xx.length) + xx;
						let yy = b.toString(16);
						let y = 'R' + flag.substring(0, 8 - yy.length) + yy;

						return 'http://test.scdeyao.com/gaode/' + z + '/' + y + '/' + x + '.png';
					},
				}),
			],
		});

		AMapSelf.value.setDefaultCursor('pointer');

		AMapSelf.value.on('click', (e: any) => {
			// AMapSelf.clearMap();
			// var marker = new AMap.Marker({
			// 	position: new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()),
			// 	icon: Icon,
			// 	offset: new AMap.Pixel(-13, -30),
			// });
			// AMapSelf.add(marker);
			var text = '您在 [ ' + e.lnglat.getLng() + ',' + e.lnglat.getLat() + ' ] 的位置双击了地图';
			// alert(text);
			infoWindow.value?.close();
		});
		let parar = {
			page: 1,
			include: ' region;road;intersection;location',
			search: 'location_id:;intersection_id:;name::like;region_id:;road_id:;pole_type:',
		};
		let res = await diApi.getDicList(parar);

		let data = [];
		if (res.isSuccess) {
			data = res.returnData;
		}
		// <div class="close-btn" onclick="clearMarker()">X</div>
		let markData = <any>[];
		const markerContent = `<div class="custom-content-marker" >
					<img src="/admin/marker.png" style="width: 30px;height: 30px;">
					
					</div>`;
		data.map((item: any, index: number) => {
			const marker = new AMap.Marker({
				position: new AMap.LngLat(item.lng, item.lat), //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
				title: item.name,
				offset: new AMap.Pixel(0, 0),
				content: markerContent, //将 html 传给 content
				//   icon: '/marker.png',
				anchor: 'bottom-center',
			});
			marker.setLabel({
				direction: 'right',
				offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
				content: "<div class='info' style='font-size:12px' onClick='set(item)'>" + item.name + '</div>', //设置文本标注内容
			});
			marker.on('mouseover', function (e: any) {
				// 显示这个marker点详细信息的浮窗，这个要放单独方法调用才能显示，暂时不明白为什么，直接把方法内的东西写在下面浮窗并不显示
			});
			// 鼠标移出marker点位触发
			marker.on('mouseout', function (e: any) {});
			// 鼠标点击marker触发
			marker.on('click', function (e: any, marker: any) {
				infoWindow.value?.close();
				setInfoWindows(e, item, AMapSelf.value);

				//
				// clearMarker()
			});

			markData.push(marker);
			markerData.value = markData;
		});

		AMapSelf.value.add(markData);
		sert(AMapSelf.value);
	}
	watch(()=>route,(newRoute, oldRoute)=>{
	console.log(newRoute, oldRoute);
	
	if(newRoute.fullPath!="/home"){
		clearInterval(sertIndex.value);
	}else{
		console.log("进来了啦啦啦--")

		setTimeout(()=>{
			nextTick(()=>{
				initMap()
			})
			
			
		},500)
	}
	
},{ deep: true, immediate: true })
onMounted(() => {
	const clearMarker = () => {
		// map.clearMap();
	};

	const wrapRef = ref<HTMLDivElement | null>(null);

	let AMapSelf = (window as any).AMap;
	let AMap = (window as any).AMap;
	const Icon = new AMap.Icon({
		size: new AMap.Size(26, 35),
		image: 'http://test.scdeyao.com/gaode/poi-marker-default.png',
		imageSize: new AMap.Size(26, 35),
	});

	

	// initMap();
});

// const data=ref([
// {
//           J:"119.693042",
//           W:"25.480390",
//           name:"1号杆",
//           top:"2.4em",
//           left:"7.7em"
//         },
//         {
//           J:"119.693559",
//           W:"25.479681",
//           name:"2号杆",
//           top:"2.7em",
//           left:"8em"
//         },
//         {
//           J:"119.694321",
//           W:"25.478630",
//           name:"3号杆",
//          top:"3.2em",
//           left:"8.2em"
//         },
//         {
//           J:"119.694636",
//           W:"25.477826",
//           name:"4号杆",
//             top:"3.6em",
//           left:"8.3em"
//         },
//         {
//           J:"119.695396",
//           W:"25.476546",
//           name:"5号杆",
//            top:"4.2em",
//           left:"8.6em"
//         },
//         {
//           J:"119.694121",
//           W:"25.475686",
//           name:"6号杆",
//            top:"4.4em",
//           left:"8em"
//         },
//         {
//           J:"119.695788",
//           W:"25.474445",
//           name:"7号杆",
//            top:"5.4em",
//           left:"8.2em"
//         },
//         {
//           J:"119.695859",
//           W:"25.476615",
//           name:"8号杆",
//            top:"4em",
//           left:"8.8em"
//         },
//         {
//           J:"119.697121",
//           W:"25.477513",
//           name:"9号杆",
//            top:"3.6em",
//           left:"9.4em"
//         },
//         {
//           J:"119.697980",
//           W:"25.476678",
//           name:"10号杆",
//           top:"4.1em",
//           left:"9.6em"
//         },
//         {
//           J:"119.698863",
//           W:"25.477377",
//           name:"11号杆",
//           top:"3.8em",
//           left:"10.1em"
//         },
//         {
//           J:"119.699880",
//           W:"25.479563",
//           name:"12号杆",
//            top:"2.8em",
//           left:"10.4em"
//         },
//         {
//           J:"119.699710",
//           W:"25.480750",
//           name:"13号杆",
//            top:"2.3em",
//           left:"10.4em"
//         },
//         {
//           J:"119.698635",
//           W:"25.482097",
//           name:"14号杆",
//            top:"1.8em",
//           left:"9.8em"
//         },
//         {
//           J:"119.697735",
//           W:"25.482591",
//           name:"15号杆",
//            top:"1.5em",
//           left:"9.4em"
//         },
//         {
//           J:"119.696476",
//           W:"25.482373",
//           name:"16号杆",
//            top:"1.8em",
//           left:"8.9em"
//         },
//         {
//           J:"119.695641",
//           W:"25.482843",
//           name:"17号杆",
//            top:"1.3em",
//           left:"8.7em"
//         },
//         {
//           J:"119.694046",
//           W:"25.482215",
//           name:"18号杆",
//            top:"1.7em",
//           left:"8.1em"
//         },
//         {
//           J:"119.696603",
//           W:"25.478395",
//           name:"19号杆",
//            top:"3.2em",
//           left:"9.1em"
//         }
// ])
</script>
<style lang="scss">
.map-img {
	width: 600px;
	/* height: 400px; */
	height: 480px;
}
.poserMap {
	position: relative;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	.listData-item {
		position: absolute;

		.map_detalMark {
			width: 100%;
			height: 100%;
			position: relative;
			.margImg {
				width: 50px;
			}
			.namert_sert {
				position: absolute;
				left: 52px;
				top: 30px;
				display: block;
				min-width: 52px;
				padding: 4px 6px;
				border: 1px #0000ff solid;
				background-color: #fff;
				font-size: 12px;
			}
		}
	}
	.info {
		font-size: 12px;
	}
}
</style>
